<template>
	<view class="itema" @click="changeGoodsInfo">
		<view class="top-image all-center">
			<image class="image" :src="item.image" mode="aspectFit"></image>
		</view>
		<view class="goods-info-boxa">
			<view class="title f-s-30 l-h-42 f-w-b">
				{{item.name}}
			</view>
			<view class="goods-tag-box all-center f-s-24">
				<block v-for="(item, index) in item.tags" :key="index">
					{{item.name}}
				</block>
			</view>
			<view class="goods-money-box flex a-i-c w-100 j-c-b">
				<view class="money flex a-i-c j-c-b color-F32E2E f-w-b">
					 ¥{{item.price_min||0}}
				</view>
				<view class="buy-btn all-center color-fff f-s-24" v-if="btnType === '1'">
					立即购买
				</view>
				<view class="buy-btn2 all-center color-fff f-w-b f-s-32" v-else @click.stop="addGoodsSku">
					+
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {goTo} from "@/nav.js"
	export default {
		props:{
			btnType:{
				type:String,
				default:'1'
			},
			item:{
				type:Object,
				default(){
					return {}
				}
			}
		},
		data() {
			return {
				
			};
		},
		methods:{
			goTo,
			changeGoodsInfo(){
				let str = JSON.stringify(this.item)
				this.$store.commit("changeGoodsInfo",str)
				this.goTo({url:'/pages/shop/goodsInfo'})
			},
			addGoodsSku(){
				let str = JSON.stringify(this.item)
				this.$store.commit("changeGoodsInfo",str)
				this.goTo({url:'/pages/shop/goodsInfo?type=2'})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.itema{
		margin-bottom: 16upx;
		width: 344upx;
		background: #FFFFFF;
		border-radius: 16upx;
		padding-top: 30upx;
		padding-bottom: 22upx;
		.goods-info-boxa{
			width: 100%;
			padding: 0 24upx;
			.goods-money-box{
				width: 100%;
				.buy-btn2{
					width: 44rpx;
					height: 44rpx;
					background: #FF6C4D;
					border-radius: 50%;
				}
				.buy-btn{
					width: 112upx;
					height: 48upx;
					background: #FF6C4D;
					border-radius: 4upx;
				}
				.money{
					
				}
			}
			.goods-tag-box{
				padding: 2upx 16upx;
				background: #FBEEE5;
				color: #EE8300;
				margin-bottom: 24upx;
			}
			.title{
				margin-bottom: 10upx;
			}
		}
		.top-image{
			width: 100%;
			height: 260upx;
			margin-bottom: 60upx;
			.image{
				width: 100%;
				height: 100%;
			}
		}
	}
</style>